<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import router from "@/router";
import { getFriendList } from '@/api/relation'
import {ElMessage} from "element-plus";
import BottomNavigation from "@/components/ChatComponents/BottomNavigation.vue";
import axios from "axios";
import QRCode from 'qrcode';

// 好友类型
interface User {
  id: number
  username: string
  avatar?: string
  phone?: string
  gender?: number
  birthday?: string // 后端转成字符串，方便前端显示
  wechatNumber?: string
  signature?: string
  region?: string
}

// 点击“扫一扫”生成当前用户的二维码
const handleScan = async () => {
  try {
    // 获取当前用户ID
    const currentUserId = getCurrentUserId();
    if (!currentUserId) {
      ElMessage.error('未获取到当前用户ID');
      return;
    }

    // 调用后端接口获取用户信息
    const token = localStorage.getItem('token');
    const res = await axios.get(`http://localhost:8050/user/${currentUserId}`, {
      headers: { Authorization: `Bearer ${token}` }
    });
    const userInfo = res.data.data as User;

    // 将用户信息转为JSON字符串
    const qrContent = JSON.stringify(userInfo, null, 2); // 格式化JSON

    // 生成二维码（Base64格式）
    const qrBase64 = await QRCode.toDataURL(qrContent, {
      width: 200,
      margin: 2,
      errorCorrectionLevel: 'H'
    });

    // 弹窗显示二维码（带用户信息和提示文字）
    const qrModal = document.createElement('div');
    qrModal.style.cssText = `
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7); z-index: 99999;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
    `;

    // 二维码卡片容器
    const qrCard = document.createElement('div');
    qrCard.style.cssText = `
      background: #fff;
      padding: 24px;
      border-radius: 12px;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.2);
      max-width: 300px;
      width: 100%;
    `;

    // 二维码图片
    const img = document.createElement('img');
    img.src = qrBase64;
    img.alt = '个人二维码';
    img.style.cssText = `
      width: 100%;
      margin-bottom: 16px;
    `;

    // 用户名
    const usernameEl = document.createElement('p');
    usernameEl.style.cssText = `
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 8px;
      color: #FF6633;
    `;
    usernameEl.textContent = userInfo.username;

    // 地区
    const regionEl = document.createElement('p');
    regionEl.style.cssText = `
      font-size: 14px;
      color: #666;
      margin: 0 0 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #f0f0f0;
    `;
    regionEl.textContent = userInfo.region || '未知地区';

    // 提示文字
    const tipEl = document.createElement('p');
    tipEl.style.cssText = `
      font-size: 14px;
      color: #888;
      margin: 0;
      line-height: 1.5;
    `;
    tipEl.textContent = '扫描二维码添加我为好友';

    // 组装结构
    qrCard.append(img, usernameEl, regionEl, tipEl);
    qrModal.appendChild(qrCard);
    document.body.appendChild(qrModal);

    // 点击背景关闭弹窗（点击卡片内部不关闭）
    qrModal.addEventListener('click', (e) => {
      if (e.target === qrModal) {
        qrModal.remove();
      }
    });

  } catch (error: any) {
    console.error('生成二维码失败:', error);
    ElMessage.error(`生成二维码失败：${error.message || '网络错误'}`);
  }
}

// 功能菜单数据
const functionMenus = ref([
  {
    name: '新的朋友',
    color: '#FF9900',
    iconViewBox: '0 0 1024 1024',
    iconPath: 'M512 608a202.752 202.752 0 0 1 202.688 202.688V896a32 32 0 0 1-64 0v-85.312A138.752 138.752 0 0 0 512 672H213.376a138.688 138.688 0 0 0-138.688 138.688V896a32 32 0 0 1-64 0v-85.312A202.688 202.688 0 0 1 213.376 608H512zM853.312 309.312a32 32 0 0 1 32 32v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 1 1-64 0v-96h-96a32 32 0 0 1 0-64h96v-96a32 32 0 0 1 32-32z M362.688 96a202.688 202.688 0 1 1-0.064 405.312A202.688 202.688 0 0 1 362.688 96z m0 64a138.688 138.688 0 1 0 0 277.376 138.688 138.688 0 0 0 0-277.376z'
  },
  {
    name: '仅聊天的朋友',
    color: '#FF9900',
    iconViewBox: '0 0 1117 1024',
    iconPath: 'M558.348742 0.03864H535.164711a249.228331 249.228331 0 0 0-239.568318 249.228331v125.580167l1.932002 9.660013a253.092336 253.092336 0 0 0 73.416098 166.15222l50.232066 52.16407h1.932003v9.660012L73.416098 780.567677 67.62009 782.499679A133.308177 133.308177 0 0 0 0 896.487831v19.320025c3.864005 57.960077 50.232067 104.328139 108.192144 104.328139h882.925172A110.124146 110.124146 0 0 0 1099.30946 910.011849v-19.320026A129.444172 129.444172 0 0 0 1027.825365 780.567677L676.200898 612.483453V604.755443L678.132901 602.823441 728.364967 550.659371A258.888344 258.888344 0 0 0 803.713067 367.119128V249.266971A247.296328 247.296328 0 0 0 558.348742 0.03864z m0 81.144108c90.804121 0 164.220218 75.3481 164.220218 168.084223V367.119128a175.812234 175.812234 0 0 1-52.16407 127.512169L620.172824 544.863364a86.940115 86.940115 0 0 0-23.184031 59.892079v7.72801c0 30.912041 17.388023 57.960077 44.436059 71.484095l351.624467 170.016226a48.300064 48.300064 0 0 1 27.048036 42.504057v13.524018a28.980038 28.980038 0 0 1-28.980039 28.980038H108.192144A27.048036 27.048036 0 0 1 81.144108 911.943851V896.487831c0-17.388023 7.72801-32.844044 23.184031-42.504057L108.192144 852.051772 459.816611 683.967548A83.07611 83.07611 0 0 0 502.320667 620.211464V614.415456L504.25267 604.755443c0-19.320026-7.72801-38.640051-19.320026-52.164069L481.068639 546.795366 428.90457 494.631297A179.676239 179.676239 0 0 1 376.7405 374.847138V249.266971c0-90.804121 71.484095-166.152221 160.356213-168.084223h21.252029z M1112.833478 589.299423v27.048036a25.116033 25.116033 0 0 1-7.72801 19.320025 25.116033 25.116033 0 0 1-19.320026 7.728011H979.525301C971.797291 643.395495 964.06928 641.463492 960.205275 635.667484a25.116033 25.116033 0 0 1-7.72801-19.320025V589.299423c0-5.796008 1.932003-13.524018 7.72801-17.388023C964.06928 566.115392 971.797291 564.183389 979.525301 564.183389h106.260141c7.72801 0 13.524018 1.932003 19.320026 7.728011 5.796008 3.864005 7.72801 11.592015 7.72801 17.388023z m0-146.832195v27.048036a25.116033 25.116033 0 0 1-7.72801 19.320025C1099.30946 492.699294 1093.513452 496.563299 1085.785442 496.563299H898.381193C890.653183 496.563299 884.857175 492.699294 879.061168 488.835289 875.197162 483.039282 871.333157 477.243274 871.333157 469.515264V442.467228c0-7.72801 3.864005-13.524018 7.728011-19.320026C884.857175 419.283197 890.653183 415.419192 898.381193 415.419192h187.404249c7.72801 0 13.524018 3.864005 19.320026 7.72801a25.116033 25.116033 0 0 1 7.72801 19.320026z m0-146.832195v27.048036C1112.833478 328.479076 1110.901475 336.207087 1105.105468 340.071092a25.116033 25.116033 0 0 1-19.320026 7.72801H898.381193a25.116033 25.116033 0 0 1-19.320025-7.72801 28.980038 28.980038 0 0 1-7.728011-17.388023V295.635033c0-7.72801 3.864005-15.456021 7.728011-19.320026a25.116033 25.116033 0 0 1 19.320025-7.72801h187.404249c7.72801 0 13.524018 1.932003 19.320026 7.72801 5.796008 3.864005 7.72801 11.592015 7.72801 19.320026z'
  },
  {
    name: '群聊',
    color: '#2DBB55',
    iconViewBox: '0 0 1024 1024',
    iconPath: 'M0 0m170.666667 0l682.666666 0q170.666667 0 170.666667 170.666667l0 682.666666q0 170.666667-170.666667 170.666667l-682.666666 0q-170.666667 0-170.666667-170.666667l0-682.666666q0-170.666667 170.666667-170.666667Z M341.0944 795.989333a234.001067 234.001067 0 0 1 237.0048-234.001066 240.0768 240.0768 0 0 1 214.510933 148.48 230.4 230.4 0 0 1 18.005334 85.504 25.002667 25.002667 0 0 0 23.995733 25.4976h3.003733a25.002667 25.002667 0 0 0 25.4976-23.995734 287.5392 287.5392 0 0 0-184.507733-268.509866 175.445333 175.445333 0 0 0 75.008-144.008534 179.029333 179.029333 0 0 0-172.509867-180.002133 177.9712 177.9712 0 0 0-109.499733 324.010667 287.880533 287.880533 0 0 0-183.005867 267.008v1.501866a23.415467 23.415467 0 0 0 23.995734 22.493867h6.007466a23.415467 23.415467 0 0 0 22.493867-23.995733z m107.997867-391.509333a125.422933 125.422933 0 0 1 145.5104-145.5104 127.624533 127.624533 0 0 1 103.509333 103.509333 125.422933 125.422933 0 0 1-145.5104 145.5104 127.624533 127.624533 0 0 1-103.441067-103.509333z M369.6128 495.991467a104.789333 104.789333 0 0 1-82.500267-103.509334 106.103467 106.103467 0 0 1 84.002134-103.509333 21.162667 21.162667 0 0 0 16.503466-21.009067 22.289067 22.289067 0 0 0-26.999466-20.992 151.108267 151.108267 0 0 0-118.510934 146.9952 149.265067 149.265067 0 0 0 64.494934 122.999467 240.64 240.64 0 0 0-153.002667 225.006933 98.986667 98.986667 0 0 0 1.501867 20.992v1.501867a22.510933 22.510933 0 0 0 45.0048 0v-1.501867c0-6.007467-1.501867-13.499733-1.501867-20.992a197.205333 197.205333 0 0 1 169.506133-195.003733 25.924267 25.924267 0 0 0 22.493867-25.4976 33.6896 33.6896 0 0 0-20.992-25.480533z'
  },
  {
    name: '标签',
    color: '#128EE9',
    iconViewBox: '0 0 1024 1024',
    iconPath: 'M448 853.333333L170.666667 576 576 170.666667H853.333333v277.333333L448 853.333333z m0-59.733333l362.666667-362.666667V213.333333h-217.6l-362.666667 362.666667 217.6 217.6zM682.666667 298.666667c25.6 0 42.666667 17.066667 42.666666 42.666666s-17.066667 42.666667-42.666666 42.666667-42.666667-17.066667-42.666667-42.666667 17.066667-42.666667 42.666667-42.666666z'
  },
  {
    name: '公众号',
    color: '#128EE9',
    iconViewBox: '0 0 1024 1024',
    iconPath: 'M300.2 269.2m-55 0a55 55 0 1 0 110 0 55 55 0 1 0-110 0Z M245.5 383.1h320v64h-320zM245.5 511.8h255.6v64H245.5zM245.5 639.3h255.6v64H245.5z M595.2 862.8H243c-32 0-58-26-58-58V219.2c0-32 26-58 58-58h414.9c32 0 58 26 58 58v363.2c14-3.3 28.6-5 43.6-5 6.9 0 13.7 0.4 20.4 1.1V219.2c0-67.3-54.7-122-122-122H243c-67.3 0-122 54.7-122 122v585.7c0 67.3 54.7 122 122 122h413.3c-25.1-16.3-46-38.2-61.1-64.1z M760.5 765m-159.6 0a159.6 159.6 0 1 0 319.2 0 159.6 159.6 0 1 0-319.2 0Z M733.5 863.4l-81.2-81.2 35.3-35.4 44.9 44.8 100.4-106.3 36.3 34.4z'
  },
  {
    name: '服务号',
    color: '#FF6633',
    iconViewBox: '0 0 1024 1024',
    iconPath: 'M139.636364 756.363636h837.818181v232.727273H139.636364z M93.090909 23.272727h814.545455c25.6 0 46.545455 20.945455 46.545454 46.545455v884.363636c0 25.6-20.945455 46.545455-46.545454 46.545455H93.090909c-25.6 0-46.545455-20.945455-46.545454-46.545455V69.818182c0-25.6 20.945455-46.545455 46.545454-46.545455z m0 46.545455v884.363636h814.545455V69.818182H93.090909z m162.909091 267.636363c-25.6 0-46.545455-20.945455-46.545455-46.545454s20.945455-46.545455 46.545455-46.545455 46.545455 20.945455 46.545455 46.545455-20.945455 46.545455-46.545455 46.545454z m244.363636 0c-25.6 0-46.545455-20.945455-46.545454-46.545454s20.945455-46.545455 46.545454-46.545455 46.545455 20.945455 46.545455 46.545455-20.945455 46.545455-46.545455 46.545454z m244.363637 0c-25.6 0-46.545455-20.945455-46.545455-46.545454s20.945455-46.545455 46.545455-46.545455 46.545455 20.945455 46.545454 46.545455-20.945455 46.545455-46.545454 46.545454zM232.727273 512h395.636363c13.963636 0 23.272727 9.309091 23.272728 23.272727s-9.309091 23.272727-23.272728 23.272728H232.727273c-13.963636 0-23.272727-9.309091-23.272728-23.272728s9.309091-23.272727 23.272728-23.272727z m0 209.454545h535.272727c13.963636 0 23.272727 9.309091 23.272727 23.272728s-9.309091 23.272727-23.272727 23.272727H232.727273c-13.963636 0-23.272727-9.309091-23.272728-23.272727s9.309091-23.272727 23.272728-23.272728z'
  },
])

// 联系人列表
const contactGroups = ref<User[]>([])
const loading = ref(true) // 加载状态

// 工具函数：从Token解析用户ID（根据实际Token结构调整字段）
const getUserIdFromToken = (token: string) => {
  if (!token) return '';
  try {
    const payloadBase64 = token.split('.')[1];
    const decoded = JSON.parse(atob(payloadBase64));
    return decoded.sub; // 假设用户ID存放在JWT的sub字段
  } catch (error) {
    console.error('Token解析失败:', error);
    return '';
  }
};

/**
 * 获取当前登录用户ID
 */
const getCurrentUserId = (): number => {
  const token = localStorage.getItem('token');
  const userId = getUserIdFromToken(token);
  return userId ? Number(userId) : 6
}

/**
 * 加载好友列表
 */
const loadFriends = async () => {
  loading.value = true
  try {
    const userId = getCurrentUserId()
    const res = await getFriendList(userId)
    if (res.data.code === 200) {
      const friends = res.data.data as User[]
      contactGroups.value = friends // 直接赋值
    }  else {
      ElMessage.error(`后端错误：${res.data.msg}`); // 显示后端返回的错误信息
    }
  } catch (error: any) {
    const errMsg = error.response?.data?.msg || error.message;
    ElMessage.error('加载好友失败，详细原因：', errMsg);
    console.error(`加载失败：${errMsg}`);
  } finally {
    loading.value = false
  }
}

// 页面挂载时加载数据
onMounted(() => {
  loadFriends()
})

// 加号菜单逻辑
const isMenuOpen = ref(false)
function handleClickOutside(e: MouseEvent) {
  const menu = document.querySelector('.menu-popup')
  const plusBtn = document.querySelector('.header-add')
  if (menu && plusBtn && !menu.contains(e.target as Node) && !plusBtn.contains(e.target as Node)) {
    isMenuOpen.value = false
  }
}

onMounted(() => document.addEventListener('click', handleClickOutside))
onUnmounted(() => document.removeEventListener('click', handleClickOutside))

// 交互方法
const openSearch = () => {
  const currentUserId = getCurrentUserId();
  router.push({
    path: '/addFriend',
    query: {currentUserId: currentUserId.toString()} // 传参：currentUserId
  });
}

// 点击添加朋友按钮
const addFriends = () => {
  const currentUserId = getCurrentUserId(); // 获取当前用户ID
  router.push({
    path: '/addFriend',
    query: { currentUserId: currentUserId.toString() } // 传参：currentUserId
  });
};

// 菜单点击处理
const handleMenuClick = (item: any) => {
  if (item.name === '新的朋友') {
    router.push('/newFriend')
  }
}

// 跳转详情页：传递好友ID
const viewContact = (contact: User) => {
  router.push({
    path: '/SearchToView',
    query: { id: contact.id.toString() } // 传ID，详情页按需请求
  })
}
</script>

<template>
  <div class="contact-page">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-left"></div>
      <h1 class="header-title">通讯录</h1>
      <div class="header-right">
        <div class="header-icon" @click="openSearch">
          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
        </div>
        <div class="header-icon header-add" @click="isMenuOpen = !isMenuOpen">
          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
          </svg>
        </div>
      </div>

      <!-- 加号下拉菜单 -->
      <div v-show="isMenuOpen" class="menu-popup">
        <div class="menu-item" @click="">
          <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4z"/>
          </svg>
          发起群聊
        </div>
        <div class="menu-item" @click="addFriends">
          <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6v8c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2zm-6-4c-1.66 0-3 1.34-3 3v8c0 1.66 1.34 3 3 3s3-1.34 3-3V5c0-1.66-1.34-3-3-3z"/>
          </svg>
          添加朋友
        </div>
        <div class="menu-item" @click="handleScan">
          <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 11v-5h-.581m0 0a8.003 8.003 0 0115.357-2m0 0H19.418m0 0a8.001 8.001 0 00-15.357-2m0 0v-5H4"/>
          </svg>
          我的二维码
        </div>
        <div class="menu-item" @click="">
          <svg class="icon mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h10M12 5v14"/>
          </svg>
          收付款
        </div>
      </div>
    </header>

    <!-- 功能菜单区 -->
    <nav class="menu-container">
      <div
          v-for="(item, index) in functionMenus"
          :key="index"
          class="menu-item"
          @click="handleMenuClick(item)"
      >
        <div class="menu-icon" :style="{background: item.color}">
          <svg class="icon" :viewBox="item.iconViewBox">
            <path :d="item.iconPath" fill="currentColor"/>
          </svg>
        </div>
        <span class="menu-text">{{ item.name }}</span>
      </div>
    </nav>

    <!-- 联系人列表 -->
    <div class="contact-container">
      <div class="contact-scroll" ref="contactScroll">
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else>
          <div class="contact-group">
            <!-- 好友列表 -->
            <div class="group-title">好友列表</div>
            <div
                v-for="contact in contactGroups"
                :key="contact.id"
                class="contact-item"
                @click="viewContact(contact)"
            >
              <div class="contact-avatar">
                <img v-if="contact.avatar" :src="contact.avatar" alt="头像">
                <div v-else class="default-avatar">{{ contact.username.charAt(0) }}</div>
              </div>
              <span class="contact-name">{{ contact.username }}</span>
            </div>
          </div>
          <div v-if="contactGroups.length === 0" class="empty">暂无联系人</div>
        </div>
      </div>

    </div>
    <BottomNavigation/>
  </div>
</template>

<style scoped>
/* 加载态样式 */
.loading, .empty {
  text-align: center;
  padding: 20px;
  color: #888;
}
/* 全局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面容器 */
.contact-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fff;
  color: #333;
}

/* 顶部导航 */
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid #eee;
  background-color: #f7f7f7;
}

.header-left {
  width: 44px; /* 占位保证标题居中 */
}

.header-title {
  font-size: 17px;
  font-weight: 600;
}

.header-right {
  display: flex; /* 搜索和加号横向排列 */
}

.header-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  cursor: pointer;
}

.header-add {
  margin-left: 8px; /* 与搜索图标间距 */
}

.icon {
  width: 22px;
  height: 22px;
}

/* 加号下拉菜单 */
.menu-popup {
  position: absolute;
  top: 52px;
  right: 16px;
  background: #333;
  color: #fff;
  border-radius: 8px;
  padding: 8px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  z-index: 999;
}

.menu-popup::before {
  content: '';
  position: absolute;
  top: -10px;
  right: 20px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #333;
}

.menu-popup .menu-item {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  cursor: pointer;
  transition: background 0.2s;
}

.menu-popup .menu-item:hover {
  background: #444;
}

.menu-popup .mr-2 {
  margin-right: 8px;
}

/* 功能菜单区 */
.menu-container {
  display: flex;
  flex-direction: column; /* 垂直排列菜单项 */
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

.menu-container .menu-item {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  margin: 4px 0; /* 菜单项间距 */
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-container .menu-item:hover {
  background-color: #f5f5f5;
}

.menu-container .menu-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

/* 调整阿里巴巴图标的显示样式 */
.menu-container .menu-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.menu-container .menu-icon .icon {
  color: white;
}

.menu-container .menu-text {
  font-size: 16px;
  color: #333;
}

/* 联系人容器 */
.contact-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: #f7f7f7;
}

.contact-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding-bottom: 20px;
}

.contact-group {
  margin-bottom: 10px;
}

.group-title {
  height: 24px;
  padding: 0 16px;
  background-color: #f1f1f1;
  color: #8e8e93;
  font-size: 12px;
  line-height: 24px;
}

.contact-item {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.contact-item:hover {
  background-color: #f5f5f5;
}

.contact-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 12px;
}

.contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar {
  width: 100%;
  height: 100%;
  background-color: #eaeaea;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.contact-name {
  font-size: 17px;
  color: #333;
}

/* 字母索引（已注释，保留样式防止布局错乱） */
.alphabet-index {
  display: none;
}
</style>
